<template>
  <div>
    <el-form ref="verifyCodeForm" :model="VerifyCodeVO" :rules="VerifyCodeVO_Rules" auto-complete="on" label-position="left">
      <el-row v-if="isShowGoBack">
        <el-col :span="24" align="right">
          <el-button type="text" @click="goBack">→ {{ $t('verification.goBack') }}</el-button>
        </el-col>
      </el-row>
      <el-form-item>
        <img class="verifycode_img" :src="verifyCodeUrl" :alt="$t('verification.verificationCode')" @click="refreshVerifyCode">
      </el-form-item>
      <el-form-item prop="verifyCode">
        <el-input
          v-model.trim="VerifyCodeVO.verifyCode"
          type="text"
          minlength="4"
          maxlength="4"
          :placeholder="$t('rules.verifyCode')"
        />
      </el-form-item>
    </el-form>
    <div>
      <el-button :loading="loading" class="gl_button_long" type="primary" @click="verification">{{ $t('verification.verification') }}</el-button>
    </div>
  </div>
</template>
<script>
import { VerifyCodeVO_Rules } from '@/lib/validate/verifyCode/index.js';
import { VerifyCodeVO } from '@/lib/form/verifyCode.js';
export default {
  name: 'VerifyCode',
  props: {
    isShowGoBack: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      VerifyCodeVO: new VerifyCodeVO(),
      VerifyCodeVO_Rules: new VerifyCodeVO_Rules(),
      verifyCodeUrl: null, // 验证码地址
      loading: false,
      returnData: {
        isVerifyCode: false, // 验证码是否正确，true是正确
        showVerifyCodeModel: false // 控制是否显示验证码,true为显示验证模块
      }
    };
  },
  created() {},
  methods: {
    // 刷新图形验证码
    refreshVerifyCode() {
      // this.verifyCodeUrl = `${公共地址}${api地址}?r=${Math.random()}`;
    },
    // 验证按钮
    verification() {
      // TODO
      this.loading = true;
      this.loading = false;
      this.returnData.isVerifyCode = true;
      this.returnData.showVerifyCodeModel = false;
      this.$emit('showVerifyCodeModel', this.returnData);
    },
    // 返回
    goBack(path) {
      this.returnData.isVerifyCode = false;
      this.returnData.showVerifyCodeModel = false;
      this.$emit('showVerifyCodeModel', this.returnData);
    }
  }
};
</script>
